<template>
    <div class="studentRegister">
        <header class="headerTitle">
            <span>学生注册</span>
        </header>
        <el-form ref="studentForm" :rules="rules" :model="studentForm" label-width="175px">
            <el-form-item label="用户名：" style="text-align: left" prop="name">
                <el-input v-model="studentForm.name" size="small" placeholder="请输入用户名" style="width: 450px;"></el-input>
            </el-form-item>
            <el-form-item label="真实姓名：" style="text-align: left" prop="realName">
                <el-input v-model="studentForm.realName" size="small" placeholder="请输入真实姓名"
                          style="width: 450px;"></el-input>
            </el-form-item>
            <el-form-item label="身份证号：" style="text-align: left" prop="IDCard">
                <el-input v-model="studentForm.IDCard" size="small" placeholder="请输入身份证号"
                          style="width: 450px;"></el-input>
            </el-form-item>
            <el-form-item label="学校：" style="text-align: left" prop="school">
                <el-select v-model="studentForm.school" size="small" placeholder="请选择学校" style="width: 450px;">
                    <el-option label="贵阳一中" value="1"></el-option>
                    <el-option label="贵阳师范" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="年级：" style="text-align: left" prop="grade">
                <el-select v-model="studentForm.grade" size="small" placeholder="请选择年级" style="width: 450px;">
                    <el-option label="二年级" value="1"></el-option>
                    <el-option label="三年级" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="班级：" style="text-align: left" prop="class">
                <el-select v-model="studentForm.class" size="small" placeholder="请选择班级" style="width: 450px;">
                    <el-option label="一班" value="1"></el-option>
                    <el-option label="二班" value="2"></el-option>
                    <el-option label="塞班" value="3"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="联系地址：" style="text-align: left" prop="contactAddress">
                <el-input v-model="studentForm.contactAddress" size="small" placeholder="请输入联系地址"
                          style="width: 450px;"></el-input>
            </el-form-item>
            <el-form-item label="设置密码：" style="text-align: left" prop="setPassword">
                <el-input v-model="studentForm.setPassword" size="small" type="password" :show-password="true"
                          placeholder="请设置密码"
                          style="width: 450px;"></el-input>
            </el-form-item>
            <el-form-item label="确认密码：" style="text-align: left" prop="confirmPwd">
                <el-input v-model="studentForm.confirmPwd" size="small" type="password" :show-password="true"
                          placeholder="请确认密码"
                          style="width: 450px;"></el-input>
            </el-form-item>
            <el-form-item label="邮箱地址：" style="text-align: left" prop="Email">
                <el-input v-model="studentForm.Email" size="small" placeholder="请输入邮箱地址"
                          style="width: 450px;"></el-input>
            </el-form-item>
            <el-form-item label-width="0">
                <el-button type="primary" size="small" @click="handleSubmit">注 册</el-button>
                <el-button size="small" @click="handleReset">重 置</el-button>
                <label class="have">
                    已有账号？<el-button type="text" @click="goLogin">去登录</el-button>
                </label>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        data() {
            let setPassword = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请设置密码'))
                } else {
                    if (this.studentForm.confirmPwd !== '') {
                        this.$refs.studentForm.validateField('confirmPwd')
                    }
                    callback()
                }
            }
            let confirmPwd = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请确认密码'))
                } else if (value !== this.studentForm.setPassword) {
                    callback(new Error('两次输入密码不一致!'))
                } else {
                    callback()
                }
            }
            return {
                studentForm: {
                    name: '', // 用户名
                    realName: '', // 真实姓名
                    IDCard: '',// 身份证号
                    school: '', // 学校
                    grade: '', // 年级
                    class: '', // 班级
                    contactAddress: '',//联系地址
                    setPassword: '',//设置密码
                    confirmPwd: '',// 确认密码
                    Email: '',// 邮箱地址
                },
                rules: {
                    name: [
                        {required: true, message: '姓名不能为空', trigger: 'blur'}
                    ],
                    realName: [
                        {required: true, message: '真实姓名不能为空', trigger: 'blur'}
                    ],
                    IDCard: [
                        {required: true, message: "请输入身份证号", trigger: "blur"},
                        {
                            pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
                            message: "请输入合法身份证号",
                            trigger: "blur"
                        }
                    ],
                    school: [
                        {required: true, message: "请选择学校", trigger: "change"}
                    ],
                    grade: [
                        {required: true, message: "请选择年级", trigger: "change"}
                    ],
                    class: [
                        {required: true, message: "请选择班级", trigger: "change"}
                    ],
                    contactAddress: [
                        {required: true, message: '请输入联系地址', trigger: 'blur'}
                    ],
                    setPassword: [
                        {required: true, validator: setPassword, trigger: 'blur'}
                    ],
                    confirmPwd: [
                        {required: true, validator: confirmPwd, trigger: 'blur'}
                    ],
                    Email: [
                        {message: "请输入邮箱地址", trigger: "blur"},
                        {
                            pattern: /^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/g,
                            message: "请输入正确的邮箱",
                            trigger: "blur"
                        }
                    ],
                }
            }
        },
        methods: {
            // 注册
            handleSubmit() {
                this.$refs.studentForm.validate((valid) => {
                    if (valid) {
                        alert('submit!')
                    } else {
                        console.log('error submit!!')
                        return false
                    }
                })
            },

            // 重置
            handleReset() {
                this.$refs.studentForm.resetFields()
            },

            // 去登录
            goLogin(){
                location.href = process.env.VUE_APP_LOGIN_URL
                localStorage.setItem("isRoute", "false")
            }
        },
        created() {

        }
    }
</script>

<style lang="scss">
    .studentRegister {
        width: 100%;
        background-color: white;
        box-sizing: border-box;
        padding: 20px;

        .headerTitle {
            width: 100%;
            box-sizing: border-box;
            padding-bottom: 20px;
            border-bottom: 1px solid #DCDFE6;
            font-size: 16px;
            color: #409EFF;
            margin-bottom: 20px;
        }

        .el-select .el-input {
            width: auto;
        }

        .have{
            font-size: 14px;
            color: #606266;
        }
    }

</style>
